<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>文章详情</title>
    <link rel="stylesheet" href="../../libs/node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../style/common.css">
    <link rel="stylesheet" href="../../style/home/article.css">
    <link rel="stylesheet" href="../../style/investigation/investigation.css">

    <script src="../../libs/vue.js"></script>
    <script src="../../libs/jquery-3.2.1.min.js"></script>
    <script src="../../jsc/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="../../libs/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../libs/layer-v3.1.1/layer/layer.js"></script>
    <!--<script src="js/system.js"></script>-->
</head>
<body>

<div id="article" v-cloak>
    <header-component></header-component>
    <navinner-component></navinner-component>

    <!-- 主站导航 -->
    <navrow-component v-if="sitelevel == ''" :siteid="site_data"></navrow-component>
    <!-- 行政站导航 -->
    <navtab2-component v-if="sitelevel != 5 && sitelevel != '' " :siteid="site_data"></navtab2-component>
    <!-- 基层站导航 -->
    <navtab3-component v-if="sitelevel==5" :siteid="site_data"></navtab3-component>

    <div class="carousel-box">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block w-100" src="../../static/images/detail_banner.png" alt="First slide">
                </div>
            </div>
        </div>
    </div>

    <main>
        <div class="content">
            <div class="article-detail">
                <div class="article-detail-l" v-if="taglist.length">
                    <news-component v-if="site_data && site_data.site_id" :siteid="parameter.type ? site_data : {}" url="../../"></news-component>
					<div class="nav flex-column nav-pills" id="v-pills-tab" v-if="taglist">
						<a class="nav-link" :class="{'active' : tagIndex == item.category_id }" v-for="(item,index) in taglist">{{ item.name }}</a>
					</div>
                </div>
                <div class="article-detail-r" :style="{width:(taglist.length ? '52rem':'100%')}">
                    <div class="article-header">
                        <div class="article-header-inner">
                            <div class="article-logo"></div>
                            <div class="article-tip">{{ category_name }} 专题栏目</div>
                        </div>
                        <div class="article-hot">HOT</div>
                    </div>
                    <div class="article-content">
                        <div class="article-title">{{articleDetail.title}}</div>
                        <div class="article-props">
                            <span>时间：{{articleDetail.publishtime_text}}</span>
                            <span>来源：{{articleDetail.resource}}</span>
                            <span>浏览次数：{{articleDetail.reading}}</span>
                        </div>
                        <div class="article-text" v-html="articleDetail.postcontent"></div>
                    </div>

                    <comment-component v-if="parameter && parameter.id " type="article" :commentid="parseInt(parameter.id)"></comment-component>
                </div>
            </div>
        </div>
    </main>

    <footer-component></footer-component>
</div>

<script src="../../jsc/common.js"></script>
<script src="../../jsc/component.js"></script>

<script>
    var search = new Vue({
        el:"#article",
        data    : {
            parameter   : parameter,
            site_data   : site ,           // 站点数据
            articleDetail : [] ,           // 文章列表
            commentList:"",                // 评论列表
            limit:10,                      // 每页条数
            page:1,                        // 页码
			taglist:[],
			type:'',
			category_name:''||decodeURI(parameter.category_name),
            sitelevel:""
        },
        mounted(){
            if (window.localStorage.getItem('station')){
                this.sitelevel = JSON.parse(window.localStorage.getItem('station')).site_level;
            }

			//获取分类
			let type_id = GetQueryString('tag') || GetQueryString('id');
			switch (type_id) {
				case 'jiayuan':
					this.type = 25;
					break;
				case 'fazhi':
					this.type = 30;
					break;
				case 'gongyi':
					this.type = 36;
					break;
			}
			this.getClassList();
            this.getArticleDetail();
        } ,
        methods : {
        	// 获取文章文类
			changetag(id,name){
				this.tagIndex = id;
				this.type = id;
				this.category_name = name;
			},
			getClassList(){
				let d = transFormData({
					type:this.type||GetQueryString('id')
				});
				console.log(d.get('type'));
				axios.post(sysurl+'index/articleCategory',d).then(res=>{
					if (res.data.data){
						this.taglist = res.data.data;
						this.tagIndex = res.data.data[0].category_id;
						this.txt = res.data.data[0].name;
					}
				})
			},
            // 获取文章列表
            getArticleDetail(){
				let d = new FormData();
				d.append('article_id',this.parameter.id);
				if (getCookie('user_id')){
					d.append('user_id',getCookie('user_id'));
					d.append('url',location.pathname + decodeURI(location.search));
				}
				axios.post(sysurl + 'index/articleDetail' , d).then(res => {
                    var datas = res.data;
                    if( datas.code === 1 ){
                        this.articleDetail = datas.data;
                    }else{
                        layer.msg(res.data.msg);
                    }
                } , err => {}).catch(( error ) => {});
            },
        } ,
        filters : {} ,
    })
</script>
</body>
</html>
